<template>
  <transition name="drop">
    <div class="dialog-wrap" v-show="isShow" v-if="mode === 1">
      <div class="dialog-cover"></div>
      <div class="dialog-content">
        <div class="dialog-c-head">
          <span>温馨提示</span>
        </div>
        <div class="dialog-c-main">
          <slot>empty</slot>
        </div>
        <div class="dialog-c-footer" @click="closeMyself">
          <div class="btn">我知道了</div>
        </div>
      </div>
    </div>
    <div class="dialog-wrap" v-show="isShow" v-else>
      <div class="dialog-cover"></div>
      <div class="dialog-content mode-2">
        <div class="dialog-c-head">
          <span>合格投资者承诺函</span>
        </div>
        <div class="dialog-c-main mode-2">
          本人/单位现就认购或参与私募基金郑重承诺如下：<br/>
          1、本人/单位承诺自身符合中国人民银行、中国银保监会、中国证监会及其他金融监管机关、行业自律组织关于私募基金合格投资者的规定，即：投资者为单位的，最近1年末净资产不低于1000万元，且若为非备案为产品运作的合伙企业的则需满足穿透至最终投资者的要求；为个人的，需满足以下条件之一：个人金融资产不低于300万元，或者近3年本人年均收入不低于50万元。<br/>
          2、本人/单位提供的所有证件、资料均真实、准确、完整、有效、合法合规。
        </div>
        <div class="dialog-c-footer mode-2">
          <div class="btn1" @click="closeMyself">退出</div>
          <div class="btn2" @click="closeConfirm">我承诺，进入直播间</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    mode: Number
  },
  methods: {
    closeMyself() {
      this.$router.back()
    },
    closeConfirm() {
      this.$emit('changeShowDialog')
    }
  }
};
</script>
<style scoped>


.drop-enter-active .dialog-content {
  transition: all 3s ease;
}
.drop-leave-active .dialog-content {
  transition: all 3s ease;
}
.drop-enter .dialog-content, .drop-leave-to .dialog-content {
  transform: scale(.5);
}
.drop-enter-to .dialog-content, .drop-leave .dialog-content {
  transform: scale(1);
}

.dialog-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1010;
  display: flex;
}
.dialog-cover {
  background: #fff;
  position: fixed;
  z-index: 109;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dialog-content {
  box-shadow: 0 0 60px rgba(0,0,0,.2);
  width: 540px;
  max-height: 80%;
  overflow: hidden;
  border-radius: 12px;
  z-index: 109;
  margin: auto;
  padding: 30px;background: #fff;
}
.dialog-content.mode-2 {
  width: 640px;
}
.dialog-c-head {
  line-height: 60px;
  padding: 0 0 30px;
  color: #333333;
  font-size: 36px;
  text-align: center;
  white-space: nowrap;
}
.dialog-c-main{
  padding-bottom: 30px;
  text-align: center;
  font-size: 24px;
  line-height: 46px;
  color: #333333;
}
.dialog-c-main.mode-2 {
  text-align: left;
}
.dialog-c-footer {
  padding-bottom: 15px;
}
.dialog-c-footer .btn {
  width: 477px;
  height: 80px;
  background: #307CFF;
  border-radius: 40px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}
.dialog-c-footer.mode-2 {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.dialog-c-footer .btn1,
.dialog-c-footer .btn2 {
  width: 49%;
  height: 80px;
  background: #EAF1FF;
  border-radius: 40px;
  line-height: 80px;
  text-align: center;
  font-size: 28px;
  color: #307CFF;
  white-space: nowrap;
}
.dialog-c-footer .btn2 {
  color: #EAF1FF;
  background: #307CFF;
}
</style>

